<template>
  <div class="content">
    <MapContent />
    <RightType />
    <BottomTimeline
      v-if="trafficStore.timeList.length > 1"
      v-loading="mapLoading"
      element-loading-background="rgba(12, 21, 54, 0.7)"
    />
    <TopBar />
    <TopSearch />
  </div>
</template>

<script setup lang="ts">
import MapContent from '@/pages/traffic/components/map-content.vue'
import RightType from '@/pages/traffic/components/right-type.vue'
import { useTrafficStore } from '@/pages/traffic/store/store'
import BottomTimeline from '@/pages/traffic/components/bottom-timeline.vue'
import TopBar from '@/pages/traffic/components/top-bar.vue'
import TopSearch from '@/pages/traffic/components/top-search.vue'

const trafficStore = useTrafficStore()
const mapLoading = computed(() => trafficStore.mapLoading)
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;
  position: relative;

  .UseDraggable {
    top: 70%;
    left: 25%;
  }
}
</style>
